import React, { useState } from 'react'
import { ScanningOutline, AddOutline, EditSOutline, DeleteOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
// 调用Redux仓库中的方法
import { selectTick, addTick, delTick, editTick } from '../../store/AddTickPreson'
import { NavBar, List, Modal, Button, Form, Input, Checkbox, } from 'antd-mobile'
function Index() {
  const navigate = useNavigate()
  const [form] = Form.useForm()
  // 获取Redux中的数据
  const { tickpreson } = useSelector((state) => state.AddTickPreson)
  const dispatch = useDispatch()
  const [visible1, setVisible1] = useState(false)
  const [slect, setSelect] = useState(false)

  const handleadd = () => {
    form.resetFields()
    setSelect(true)
    setVisible1(true)
  }

  const handleEdit = (item) => {
    form.setFieldsValue(item)
    setSelect(false)
    setVisible1(true)
  }



  const onFinish = (item) => {
    if (slect) {
      const object = ({ ...form.getFieldsValue(), id: Date.now(), state: false })
      dispatch(addTick(object))
      setVisible1(false)
    }
    else {
      dispatch(editTick(item))
      form.getFieldsValue(item)
      setVisible1(false)
    }

  }

  const handleDel = (item) => {
    dispatch(delTick(item))
  }
  return (
    <div>
      <div><NavBar onBack={() => navigate(-1)}>新增乘客</NavBar></div>
      <Button block size='large' onClick={() => handleadd()}>
        <AddOutline />添加乘客(成人/学生/儿童)
      </Button>
      <div>
        {
          // 调用Redux仓库中的数据并渲染出来
          tickpreson?.map((item, ind) => (
            <List.Item
              key={ind}
              title={<span style={{ color: 'black' }}>姓名:{item.username}</span>}
              description={<span style={{ color: 'black' }}>手机号:{item.phone}</span>}
              prefix={<span style={{ fontSize: '25px', lineHeight: '48px' }} onClick={() => handleEdit(item.username)}><EditSOutline /></span>}
              extra={
                <div>
                  <span style={{ fontSize: '25px', marginRight: '10px' }} onClick={() => handleDel(item.username)}><DeleteOutline /></span>
                  <span>
                    <Checkbox
                      // 判断状态为true或是false
                      checked={item.status}
                      // 调用Redux仓库中的方法来进行选择乘车人
                      onChange={(item) => {
                        dispatch(selectTick(item))
                      }}
                    />
                  </span>
                </div>
              }
            >
              {item.type}:{item.code}
            </List.Item>
          ))
        }
      </div>
      <Modal
        visible={visible1}
        content={
          <div>
            <Button block size='large'>
              <ScanningOutline />证件扫描
            </Button>
            <Form
              onFinish={onFinish}
              form={form}
              layout='horizontal'
              footer={
                <Button block type='submit' color='primary' size='large'>
                  提交
                </Button>
              }
            >
              <Form.Header>{slect ? '添加' : '编辑'}</Form.Header>
              <Form.Item
                name='name'
                label='姓名'
                rules={[{ required: true, message: '姓名不能为空' }]}
              >
                <Input placeholder='请输入姓名' />
              </Form.Item>
              <Form.Item
                name='type'
                label='类型'
                rules={[{ required: true, message: '类型不能为空' }]}
              >
                <Input placeholder='请输入类型' />
              </Form.Item>
              <Form.Item
                name='code'
                label='证件号码'
                rules={[{ required: true, message: '证件号码不能为空' }]}
              >
                <Input placeholder='请输入证件号码' />
              </Form.Item>
              <Form.Item
                name='phone'
                label='手机号'
                rules={[
                  { required: true, message: '手机号不能为空' },
                  { pattern: /^1[3-9]\w{9}$/, message: '手机号格式不正确' }
                ]}
              >
                <Input placeholder='请输入手机号' />
              </Form.Item>
            </Form>
          </div>
        }
        closeOnAction
        onClose={() => {
          setVisible1(false)
        }}

      />
    </div>
  )
}

export default Index
